<template>
	<div>
	  <van-popup
		  v-model="showCode"
		  position="bottom"
		  :style="{ height: '100%',width:'100%'}"
		  id="qcodePopup"
	  >
	     <div class="codeMask">
	     	<div class="cancleIcon">
	     		<img src="../../../../static/img/lanhu/63.png" alt="" 
	     			style="width: 20px;height: 20px;border:1px dashed #fff" @click="showCode=false"/>
	     	</div>
	     	<div class="code">
	     		<div class="container" id="container">
	     			<div style="padding: 30px 0 25px;text-align: center;">
	     				<img src="../../../../static/img/lanhu/18.png" alt="" style="width: 50%;"/>
	     			</div>
	     			
	     			
	     			<div id="code" ref="code" style="display: flex;justify-content: center;">
	     			</div>
	     			
	     			
	     			<div style="margin-top: 25px;display: flex;justify-content: center;">
	     				<img :src="img" alt="" style="width: 50px;height: 50px;display: block;border-radius: 2px;"/>
	     			</div>
	     			<div style="padding: 10px 30px 0px;text-align: center;font-size: 16px;">{{name}}</div>
	     			<div style="text-align: center;padding: 5px 0 10px;font-size:14px;color: #f22613;">&yen; {{formatFixed2(comPrice)}}</div>
	     		</div>
	     	</div>
	     	
	     	<div class="shareWrap" style="padding-bottom: 20px;">
	     		<div class="left" @click="saveImg">
	     			<div style="width: 48px;height: 48px;display: flex;justify-content: center;">
		     			<img src="../../../../static/img/lanhu/12.png" alt="" style="width: 42px;height: 42px;"/>
	     			</div>
	     			<span style="color: #fff;margin-top: 5px;opacity: 0.8;">保存图片</span>
	     		</div>
	     		<div class="right">
	     			<div class="section" @click="shareWx">
	     				<img src="../../../../static/img/lanhu/15.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;text-align: center;">微信</span>
	     			</div>   
	     			<div class="section" @click="shareWxFriend">
	     				<img src="../../../../static/img/lanhu/61.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;text-align: center;">朋友圈</span>
	     			</div> 
	     			<div class="section" @click="shareCircle">
	     				<img src="../../../../static/img/lanhu/62.png" alt="" />
	     				<span style="color: #fff;margin-top: 8px;opacity: 0.8;text-align: center;">圈子</span>
	     			</div> 	     			
	     		</div>
	     	</div>
	     </div>
	  </van-popup>	
	</div>	
</template>

<script>
import QRCode  from "qrcodejs2"		
import {getFun,apiUrl} from '@/api/publicFun.js'
import html2canvas  from '@/api/html2canvas.js'
import {getAppFun} from '@/api/app.js'
let appFun=getAppFun()
let publicFun=getFun()
let api=apiUrl()
export default {	
	data() {
       return {
       	  userId:'',
       	  comId:'',
          showCode:false,
          isFirst:true,  // 判断是否第一次显示二维码
          url1:this.$api+'/marketorderservice/api/v1/market/oss/upload/common', // 用于绑定图片上传地址
          qcodeImg:''
       }
	},
	props:['img','name','comPrice'],
	methods: {	
		showCodeMask(){
			this.showCode=true
			if(this.isFirst){
			    this.$nextTick (function () {			       
			       this.qrcode();
			    })
			    this.isFirst=false
			}
		},
		saveImg(){
			if(!this.qcodeImg){
				this.$toast('二维码图片上传服务器中...')
				return false
			}
			else{
				this.getSaveImg(this.qcodeImg)
			}
		},
	    qrcode () {    	
	    	var container=document.getElementById('container')
	        let that = this;
	        let linkUrl=api+'/market/goods/shareDetail?t='+new Date().getTime()+'&userId='+this.userId+'&comId='+this.comId
	        let qrcode = new QRCode('code', {
	            width: 160,
	            height: 160,        // 高度
	            text:linkUrl
	        })	 
	        setTimeout(function(){
	            html2canvas(container, { backgroundColor: null}).then(canvas => {
	              let url = canvas.toDataURL('image/png')
	              that.afterRead(url)
	            });	  	        	
	        },300)        
	    },
	    
		// base64转图片
		dataURLtoBlob(dataurl) {		
		    var arr = dataurl.split(','),		
		    mime = arr[0].match(/:(.*?);/)[1],		
		    bstr = atob(arr[1]),		
		    n = bstr.length,		
		    u8arr = new Uint8Array(n);		
		    while (n--) {		
		        u8arr[n] = bstr.charCodeAt(n);		
		    }		
		    return new Blob([u8arr], {		
		        type: mime		
		    });		
		},
		// 保存服务器图片路径
		afterRead(res){	
			let that=this
	        var obj = this.dataURLtoBlob(res);
			var fd = new FormData();
			fd.append("file", obj,"image.png");
			this.$jquery.ajax({
			    url: this.url1,
			    type: "POST",
			    processData: false,
			    contentType: false,
			    data: fd,
			    headers: {
			        userKey: appFun.getDevice()	 
			    },			    
			    success: function (result) {
			      that.qcodeImg=result.data.url
			    }
			});		
		},	    
        shareWx(){
       	    let time=new Date().getTime()
            let shareTitle=this.name
            let shareUrl=api+'/market/goods/shareDetail'+'?t='+time+'&userId='+this.userId+'&comId='+this.comId
            let sharePic=this.img
            let shareDesc=shareTitle.substring(0,20)+',快来集市抢货吧。'+shareUrl       	      	    
       	    this.appShareWx(shareTitle,shareUrl,sharePic,shareDesc)    
        },
        shareWxFriend(){
       	    let time=new Date().getTime()
            let shareTitle=this.name
            let shareUrl=api+'/market/goods/shareDetail'+'?t='+time+'&userId='+this.userId+'&comId='+this.comId
            let sharePic=this.img
            let shareDesc=shareTitle.substring(0,20)+',快来集市抢货吧。'+shareUrl       	      	    
       	    this.appShareWxFriend(shareTitle,shareUrl,sharePic,shareDesc)         	
        },
        shareCircle(){
       	    let goodsImage=this.img
       	    let goodsTitle=this.name
       	    let goodsId=this.comId
       	    this.appShareCircle(goodsId,goodsImage,goodsTitle)
        }	    
	},
	mixins:[publicFun],//混入		
	mounted() {
		this.comId=this.$router.currentRoute.query.comId;
		this.userId=this.$router.currentRoute.query.userId;	
	}
}	
</script>

<style scoped="" lang="scss">

.shareWrap{padding: 0 15px;margin-top: 30px;display: flex;
    .left{display: flex;flex-direction: column;padding-right: 24px;border-right: 1px solid rgba(255,255,255,0.7);}
    .right{display: flex;
    	.section{display: flex;flex-direction: column;text-align:center;margin-left: 10px;
    	   img{width: 45px;height: 45px;display: block;}
    	}
    }
}
.mask{background: #000;width: 100%;min-height: 100%;
	.footer{background: #fff;width: 100%;padding: 12px 0;font-size: 16px;text-align: center;margin-top: 18px;}
}
.cancleIcon{padding: 32px 25px 0;}
.code{padding: 32px 25px 0;.container{background: #fff;}}
.van-popup{background: rgba(0,0,0,0.2);}
</style>